<!DOCTYPE html>
<html lang="en">
<?php
// 启动会话
session_start();
?>

<script>
    function userIsLoggedIn() {
        // 在这里实现用户登录状态的检查逻辑
        // 返回值为布尔值，true 表示用户已登录，false 表示用户未登录
        // 示例：检查用户是否具有有效的登录凭据
        // 这里改为检查会话中的登录状态
        return <?php echo isset($_SESSION['loggedin']) && $_SESSION['loggedin'] ? 'true' : 'false'; ?>;
    }

    // 在页面加载时检查用户登录状态
    window.addEventListener('DOMContentLoaded', function() {
        if (!userIsLoggedIn()) {
            window.location.href = '../Login.php'; // 请将 'login.html' 替换为您实际的登录页面路径
        }
    });
</script>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>房态查询</title>
    <link rel="stylesheet" href="../css/bootstrap.min530.css">
    <link rel="stylesheet" href="../css/bootstrap.min441.css">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/jquery-ui.css">
    <link rel="stylesheet" href="../css/bootstrap-select.css">

    <!-- JavaScript代码 -->
    <script src="../js/bootstrap.bundle.min.js"></script>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/jquery-3.5.1.slim.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min441.js"></script>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.bundle.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min4.3.1.js"></script>
    <script src="../js/jquery-ui.js"></script>
    <script src="../js/bootstrap-select.js"></script>



    <!-- 筛选库 -->
    <!-- jQuery 库 -->
    <script src="../js/jquery-3.6.0.min.js"></script>
    <!-- DataTables 核心库 -->
    <link rel="stylesheet" href="../css/jquery.dataTables.css">
    <script src="../js/jquery.dataTables.js"></script>
    <!-- 引入 Date input 插件的样式文件 -->
    <link rel="stylesheet" type="text/css" href="../css/dataTables.dateTime.min.css">
    <!-- 引入 Date input 插件的 JavaScript 文件 -->
    <script type="text/javascript" src="../js/dataTables.dateTime.min.js"></script>




</head>
</head>

<body>
    <div class="container">
        <!-- 预定管理 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="#">酒店后台管理系统</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item ">
                        <a class="nav-link" href="./预购订单管理.php">预订管理<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="./房态查询页面.php">房态查询<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./房间状态管理.php">房态管理<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./后台房源管理页面.php">房源管理<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./客户管理页面.php">客户管理<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item ">
                        <a class="nav-link" href="./账户管理页面.php">账户管理<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./留言后台查看界面.php">留言管理<span class="sr-only">(current)</span></a>
                    </li>


                    <li class="nav-item">
                        <a class="nav-link" href="../backend01.php">退回主页<span class="sr-only">(current)</span></a>
                    </li>

                </ul>
            </div>
        </nav>


        <div class="container">
            <h1>房态查询</h1>

            <!-- 搜索和过滤组件 -->
            <div class="row mb-3">
                <div class="col">
                    <input type="text" id="searchInput" class="form-control" placeholder="搜索客房">
                </div>
                <div class="col">
                    <select id="filterStatus" class="form-control">
                        <option value="all">所有状态</option>
                        <option value="未退房">未退房</option>
                        <option value="已退房">已退房</option>
                    </select>
                </div>
                <!-- 在搜索和过滤组件中修改清洁情况的搜索框 -->
                <div class="col">
                    <select id="searchCleanlinessInput" class="form-control">
                        <option value="all">所有清洁情况</option>
                        <option value="已清洁">已清洁</option>
                        <option value="未清洁">未清洁</option>
                    </select>
                </div>
                <div class="col">
                    <select id="filterQualified" class="form-control">
                        <option value="all">所有合格情况</option>
                        <option value="合格">合格</option>
                        <option value="不合格">不合格</option>
                    </select>
                </div>
                <div class="col">
                    <select id="filterSellable" class="form-control">
                        <option value="all">所有出售情况</option>
                        <option value="可出售">可出售</option>
                        <option value="禁止出售">禁止出售</option>
                    </select>
                </div>
            </div>

            <!-- 客房列表 -->
            <div id="roomList" class="row">
                <!-- 这里将会动态生成客房列表 -->
            </div>

            <!-- 预留一行显示待编辑 -->
            <div class="row mt-3">
                <div class="col-4 mb-3">
                    <div class="card">
                        <div class="card-body">
                            <p class="card-text">待编辑</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script src="../js/jquery-3.6.0.min.js"></script>
        <script src="../js/bootstrap.min.js"></script>
        <script>
            // //房间数据
            // var rooms = [
            //     { number: '100', status: '未退房', roomType: '', cleanliness: "未清洁", cleaner: '张三', qualified: false, sellable: false, lastcleaned: '' },
            //     { number: '101', status: '未退房', roomType: '', cleanliness: "未清洁", cleaner: '张三', qualified: false, sellable: false, lastcleaned: '' }
            // ];

            // $.ajax({
            //     url: '../backend/api/roomStatusQueryPage_1.php',
            //     method: 'GET',
            //     dataType: 'json',
            //     success: function (response) {
            //         // 将 PHP 返回的房间数据分配给 rooms 数组
            //         console.log(response);
            //         var rooms = response;

            //         // 在这里可以对 rooms 数组进行处理或使用它做其他操作
            //         console.log(rooms);
            //         generateRoomList(rooms);
            //     },
            //     error: function (xhr, status, error) {
            //         console.log('发生错误：' + error);
            //     }
            // });
            // // 监听搜索和过滤条件变化
            // $('#searchInput, #filterStatus, #searchCleanlinessInput, #filterQualified, #filterSellable').on('input', function () {
            //     generateRoomList();
            // });
            // function generateRoomList() {
            //     var searchInput = $('#searchInput').val().toLowerCase();
            //     var filterStatus = $('#filterStatus').val();
            //     var searchCleanlinessInput = $('#searchCleanlinessInput').val().toLowerCase();
            //     var filterQualified = $('#filterQualified').val();
            //     var filterSellable = $('#filterSellable').val();

            //     $('#roomList').empty();
            //     rooms.forEach(function (room) {
            //         if ((filterStatus === 'all' || room.status === filterStatus) &&
            //             (room.number.toLowerCase().includes(searchInput)) &&
            //             (searchCleanlinessInput === 'all' || room.cleanliness === searchCleanlinessInput) &&
            //             (filterQualified === 'all' || room.qualified === (filterQualified === '合格')) &&
            //             (filterSellable === 'all' || room.sellable === (filterSellable === '可出售'))
            //         ) {
            //             var cleanerInfo = room.cleanliness === '未清洁' ? '将要由' : '由';
            //             var cleanerName = room.cleaner ? room.cleaner : '张三';
            //             var cleanerMessage = cleanerInfo + cleanerName + '打扫';
            //             var qualifiedStatus = room.qualified ? '合格' : '不合格';
            //             var sellableStatus = room.sellable ? '可出售' : '禁止出售';
            //             // var roomItem = $('<div class="col-4 mb-3"><div class="card"><div class="card-body"><h5 class="card-title">房间号：' + room.number + '</h5><p class="card-text">占用情况：' + room.status + '</p><p class="card-text">清洁情况：' + room.cleanliness + '</p><p  class="card-text">打扫人员：' + cleanerMessage + '</p><p class="card-text">合格情况：' + qualifiedStatus + '</p><p class="card-text">出售情况：' + sellableStatus + '</p></div></div></div>');
            //             // $('#roomList').append(roomItem);
            //             var roomItem = $('<div class="col-4 mb-3"><div class="card"><div class="card-body"><h5 class="card-title">房间号：' + room.number + '</h5><p class="card-text pt-1">房间类型：' + room.roomType + '</p><p class="card-text">占用情况：' + room.status + '</p><p class="card-text">清洁情况：' + room.cleanliness + '</p><p  class="card-text">打扫人员：' + cleanerMessage + '</p><p class="card-text">合格情况：' + qualifiedStatus + '</p><p class="card-text">出售情况：' + sellableStatus + '</p><p class="card-text">上次清洁时间：' + room.lastcleaned + '</p></div></div></div>');
            //             $('#roomList').append(roomItem);
            //         }
            //     });
            // }
            // $(document).ready(function () {
            //     generateRoomList();
            // });
            // // 监听搜索和过滤条件变化
            // $('#searchInput, #filterStatus').on('input', function () {
            //     generateRoomList();
            // });
            // // 监听分配按钮点击事件
            // $(document).on('click', '.assign-btn', function () {
            //     var roomNumber = $(this).data('room-number');
            //     var newCleaner = $(this).siblings('.cleaner-select').val();
            //     var room = rooms.find(function (r) {
            //         return r.number === roomNumber;
            //     });
            //     if (room.status === '已退房') { // 如果房间已清洁，不可修改
            //         console.log('房间已打扫，不可修改打扫人员');
            //         return;
            //     }
            //     room.cleaner = newCleaner;
            //     room.cleanliness = newCleaner === '张三' ? '干净' : '脏乱'; // 根据选择的清洁员更新卫生情况
            //     generateRoomList(); // 更新房态列表显示
            //     console.log('修改了房间' + roomNumber + '的打扫人员为：' + newCleaner);
            // });
            // // 当页面加载完成时，调用 generateRoomList 函数，确保第一次打开页面时默认显示所有房间
            // $(document).ready(function () {
            //     generateRoomList();
            // });






            $(document).ready(function() {
                var roomsData; // 声明一个变量来存储房间数据
                // 监听搜索和过滤条件变化
                $('#searchInput, #filterStatus, #searchCleanlinessInput, #filterQualified, #filterSellable').on('change', function() {
                    generateRoomList(roomsData);
                });
                // 页面加载完成时请求后端数据
                $.ajax({
                    url: '../backend/api/roomStatusQueryPage_1.php',
                    method: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        roomsData = response; // 将返回的房间数据赋值给声明的变量
                        generateRoomList(roomsData); // 调用生成房间列表的函数并传入房间数据
                    },
                    error: function(xhr, status, error) {
                        console.log('发生错误：' + error);
                    }
                });

            });

            function generateRoomList(rooms) {
                var searchInput = $('#searchInput').val().toLowerCase();
                var filterStatus = $('#filterStatus').val();
                var searchCleanlinessInput = $('#searchCleanlinessInput').val().toLowerCase();
                var filterQualified = $('#filterQualified').val();
                var filterSellable = $('#filterSellable').val();
                // 使用传入的房间数据或全局变量中的房间数据
                rooms = rooms || window.rooms;
                $('#roomList').empty();
                rooms.forEach(function(room) {
                    if (
                        (filterStatus === 'all' || room.status === filterStatus) &&
                        (room.number.toLowerCase().includes(searchInput)) &&
                        (searchCleanlinessInput === 'all' || room.cleanliness === searchCleanlinessInput) &&
                        (filterQualified === 'all' || room.qualified === (filterQualified === '合格')) &&
                        (filterSellable === 'all' || room.sellable === (filterSellable === '可出售'))
                    ) {
                        // 生成符合条件的房间列表
                        var cleanerInfo = room.cleanliness === '未清洁' ? '将要由' : '由';
                        var cleanerName = room.cleaner ? room.cleaner : '张三';
                        var cleanerMessage = cleanerInfo + cleanerName + '打扫';
                        var qualifiedStatus = room.qualified ? '合格' : '不合格';
                        var sellableStatus = room.sellable ? '可出售' : '禁止出售';
                        var roomItem = $('<div class="col-4 mb-3"><div class="card"><div class="card-body"><h5 class="card-title">房间号：' + room.number + '</h5><p class="card-text pt-1">房间类型：' + room.roomType + '</p><p class="card-text">占用情况：' + room.status + '</p><p class="card-text">清洁情况：' + room.cleanliness + '</p><p  class="card-text">打扫人员：' + cleanerMessage + '</p><p class="card-text">合格情况：' + qualifiedStatus + '</p><p class="card-text">出售情况：' + sellableStatus + '</p><p class="card-text">上次清洁时间：' + room.lastcleaned + '</p></div></div></div>');
                        $('#roomList').append(roomItem);
                    }
                });
            }
        </script>
</body>

</html>